import React, { Component } from 'react'

import MySwiper from './MySwiper'
import MySwiperItem from './MySwiperItem'

import './css/index.css'

export default class App extends Component {
  state = {
    list: [],
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        list: ['11', '22', '33', '44', '55', '66', '77', '88', '99'],
      })
    }, 1000)
  }

  render() {
    return (
      <>
        <MySwiper loop={true}>
          {this.state.list.map((item) => {
            return <MySwiperItem key={item}>{item}</MySwiperItem>
          })}
        </MySwiper>
      </>
    )
  }
}
